<template>
<div>
  <div class="item_small flex" v-for="i,k in list" :key="k" @click="toDetail(i.id)">
    <div class="item_img_div">
      <img v-if="!i.isErr&&i.thumb" class="item_img" @error="i.isErr=true;$forceUpdate()" :src="i.thumb" alt="">
      <img v-else class="item_img" src="https://datacenter.zstzpt.com/uploads/20240129/20240129120743_65b7248fc28fc.png" alt="">
    </div>
    <div class="item_info">
      <div class="item_title text_line">{{i.park_name}}</div>
      <div class="item_chain mt10 mb7">{{ i.chain_names.split(',')[0]||'-' }}</div>
      <div class="item_b flex_sb">
        <div>{{i.city_names?i.city_names.split(',').join(''):'-'}}</div>
        <div class="flex_ac">
          <img width="11px" height="11px" class="mr4" src="~@/assets/img/phone.png" alt="">
          {{i.phone||'-'}}
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  props: {
    list: {
      default:[]
    }
  },
  data() {
    return {
      
    }
  },
  methods:{
    toDetail(id){
      this.$router.push({name:'parkDetail',query:{id}})
    },
  }
}
</script>
<style lang="scss" scoped>
.item_title{
  font-weight: 500;
  font-size: 15px;
  color: #000000;
}
.item_chain{
  height: 16px;
  background: rgba(250,138,38,0.1);
  border-radius: 3px;
  line-height: 16px;
  padding: 0 5px;
  color: #FA8A26;
  font-size: 11px;
  width: fit-content;
}

.item_b{
  font-size: 13px;
  color: #666666;
}
.item_small{
  margin: 10px;
  background: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0px 2px 3px 0px rgba(24,27,37,0.06);
  padding: 15px 10px;
  .item_img{
    width: 110px;
    height: 70px;
    margin-right: 10px;
    display: block;
    border-radius: 3px;
  }
  .item_info{
    width: calc(100% - 120px);
  }
}
</style>